<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define triangle vertices
    const A = { x: 120, y: 80 };
    const B = { x: 120, y: 350 };
    const C = { x: 380, y: 350 };

    // Draw the hollow tube for the triangle
    ctx.beginPath();
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.closePath();
    
    // Outer stroke (black)
    ctx.lineWidth = 10;
    ctx.strokeStyle = 'black';
    ctx.lineJoin = 'round';
    ctx.stroke();

    // Inner stroke (white, to create hollow effect)
    ctx.lineWidth = 6;
    ctx.strokeStyle = 'white';
    ctx.stroke();

    // Draw labels for vertices
    ctx.fillStyle = 'black';
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('A', 100, 75);
    ctx.fillText('B', 100, 368);
    ctx.fillText('C', 385, 368);

    // Draw labels for paths '1' and '2'
    ctx.font = '18px Times New Roman';
    ctx.fillText('1', 100, 105);
    ctx.fillText('2', 140, 85);

    // Draw a small dot representing the initial position of a ball on path 1
    ctx.beginPath();
    ctx.arc(A.x, A.y + 15, 2, 0, 2 * Math.PI); // Positioned at (120, 95)
    ctx.fillStyle = 'black';
    ctx.fill();

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // Draw the gravity vector
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    drawArrow(ctx, 180, 200, 180, 250);
    ctx.stroke();
    
    // Label for gravity vector
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('g', 190, 230);

    // Draw the bottom caption "图 1" (Figure 1)
    ctx.font = '22px KaiTi';
    ctx.fillText('图 1', 230, 420);

</script>
</body>
</html>